import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
// 自定义指令
app.directive('img-lazy', {
  mounted(el, binding) {
    // el: 指令绑定的元素
    // v-指令名="指令的值"
    // binding.value: 传递给指令的值。 图片url
    // console.log(el, binding.value);
    const { stop } = useIntersectionObserver(
  el,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // 进入视口区域
      el.src = binding.value
      stop()
    }
  },
)
  },
})
  }
}
